@function px2rem($px) {
    @return calc($px / 15) * 1rem;
}

.video-player {
    position: relative;
    height: 100%;
    &.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
    }
    video {
        background-color: #000000;
    }
    .barrage {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
    }
    .controls {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        .play-button {
            position: absolute;
            right: px2rem(12);
            bottom: px2rem(56);
            width: px2rem(46);
            height: px2rem(46);
            opacity: 0.85;
            background-size: 100% auto;
            &.play {
                background-image: url("../../assets/images/tv-play.png");
            }
            &.pause {
                background-image: url("../../assets/images/tv-pause.png");
            }
        }
        .control-bar {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: px2rem(44);
            background-color: rgba(0, 0, 0, 0.5);
            &.live-control {
                background-color: transparent;
                background-image: linear-gradient( 180deg, transparent, rgba(0, 0, 0, 0.7));
                .left {
                    margin-left: px2rem(12);
                }
            }
            .left {
                display: inline-block;
                line-height: px2rem(44);
                color: #ffffff;
                font-size: px2rem(15.6);
                font-family: arial, sans-serif;
                &>span {
                    display: inline-block;
                }
                .time,
                .total-duration {
                    width: px2rem(50);
                }
                .time {
                    text-align: right;
                }
                .split {
                    width: px2rem(7.6);
                    text-align: center;
                }
                .total-duration {
                    text-align: left;
                }
            }
            .center {
                position: absolute;
                left: px2rem(108);
                top: px2rem(16);
                right: px2rem(108);
                height: px2rem(10);
                .progress-wrapper {
                    position: relative;
                    height: 100%;
                    background-color: #4c4c4c;
                    .progress {
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        background-color: #de698c;
                        &:after {
                            content: "";
                            display: block;
                            position: absolute;
                            top: px2rem(-4);
                            right: px2rem(-14);
                            width: px2rem(18);
                            height: px2rem(18);
                            background-color: #ffffff;
                            box-shadow: px2rem(0.5) px2rem(0.5) px2rem(3) #000000;
                            border-radius: 50%;
                        }
                    }
                }
            }
            .right {
                float: right;
                margin-right: px2rem(12);
                .barrage-on,
                .barrage-off {
                    display: inline-block;
                    width: px2rem(24);
                    height: px2rem(24);
                    margin-top: px2rem(10);
                    background-size: 100% auto;
                }
                .barrage-on {
                    background-image: url("../../assets/images/barrage-on.png");
                }
                .barrage-off {
                    background-image: url("../../assets/images/barrage-off.png");
                }
                .fullscreen {
                    display: inline-block;
                    width: px2rem(24);
                    height: px2rem(24);
                    margin-top: px2rem(10);
                    margin-left: px2rem(16);
                    background-image: url("../../assets/images/fullscreen.png");
                    background-size: 100% auto;
                }
            }
        }
    }
    .cover {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: px2rem(15);
        color: #ffffff;
        overflow: hidden;
        z-index: 99;
        .title {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
            line-height: px2rem(32);
            z-index: 1;
        }
        .pic {
            position: absolute;
            width: 100%;
            /*   height: 100%; */
            opacity: 0.85;
            border-style: none;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .pre-play {
            position: absolute;
            left: 0;
            right: 0;
            bottom: px2rem(14);
            .duration {
                display: inline-block;
                padding: 0 px2rem(8);
                margin-left: px2rem(12);
                font-size: px2rem(12);
                line-height: px2rem(20);
                border: px2rem(1) solid hsla(0, 0%, 100%, 0.6);
                background-color: hsla(0, 0%, 100%, 0.2);
                border-radius: px2rem(2);
            }
            .preview {
                float: right;
                width: px2rem(46);
                height: px2rem(46);
                margin-right: px2rem(12);
                margin-top: px2rem(-20);
                background: url("../../assets/images/tv-play.png");
                background-size: 100% auto;
            }
        }
    }
    .loading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: #ffffff;
        font-size: px2rem(15);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99;
        .wrapper {
            text-align: center;
            .img {
                width: px2rem(40);
                height: px2rem(40);
            }
            .text {
                display: block;
                margin-top: px2rem(4);
            }
        }
    }
    .finish-cover {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        overflow: hidden;
        .cover-pic {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        .cover-wrapper {
            position: relative;
            height: 100%;
            padding: 0 px2rem(12);
            font-size: px2rem(14);
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.8);
            .replay {
                position: absolute;
                right: px2rem(12);
                bottom: px2rem(30);
                .replay-icon {
                    display: inline-block;
                    float: left;
                    width: px2rem(16);
                    height: px2rem(16);
                    margin-top: px2rem(2);
                    margin-right: px2rem(3);
                    background-image: url("../../assets/images/ico-replay.png");
                    background-size: 100% 100%;
                }
            }
        }
    }
    .notice-cover {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        background-color: #000000;
        .notice-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            i {
                display: block;
                width: px2rem(200);
                height: px2rem(114);
                background-image: url("../../assets/images/nocontent.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            span {
                display: block;
                text-align: center;
                font-size: px2rem(14);
                color: #23ade5;
            }
        }
    }
}